<template>
  <div class="v-custom-attr-display">
    <div
      class="_table-body g-relative"
      style="padding: 0 16px 16px 16px"
    >
      <div class="v-custom-attr-diaplay-header g-bolder">{{ $t(attributes.targetName) }}</div>
      <div class="v-custom-attr-display-table">
        <el-table
          ref="tableRef"
          v-loading="loading"
          :data="attributes.attributes"
          row-key="id"
          :indent="0"
          :show-header="false"
          :header-cell-style="{ color: '#000' }"
          :empty-text="$t('暂无数据')"
          :element-loading-text="$t('加载中') + '...'"
          highlight-current-row
        >
          <el-table-column
            v-for="column in columns"
            :key="column.prop"
            :prop="column.prop"
            :resizable="column.resizable"
            :width="column.width"
            :align="column.align"
            :min-width="30"
          >
            <template #default="{ row }: { row: Attribute }">
              <div
                v-if="column.prop === 'name'"
                class="g-jc-sb"
              >
                <span>{{ row.name }}</span>
              </div>
              <div
                v-else-if="column.prop === 'operation'"
                style="display: flex; align-items: center; justify-content: flex-end"
              >
                <span @click="handleBtnClick('hide', row)">
                  <img
                    v-if="row.hidden"
                    class="_attr-icon g-pointer"
                    src="statics/icons/table/icon_hide.svg"
                    alt="隐藏"
                  />
                  <img
                    v-else
                    class="_attr-icon g-pointer"
                    src="statics/icons/table/icon_display.svg"
                    alt="显示"
                  />
                </span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {
  Attribute,
  CustomAttributes
} from "@/modules/model/modals/shapeCustomization/comps/ShapeCompCustomAttrConfiguration/ShapeCompCustomAttrConfigModel";
import { onMounted, ref } from "vue";
import Sortable from "sortablejs";

const props = defineProps<{
  attributes: CustomAttributes;
}>();

type Column = {
  prop: string;
  resizable: boolean;
  align: string;
};

const loading = ref(false);

const columns: Column[] = [
  {
    prop: "name",
    resizable: false,
    align: "left"
  },
  {
    prop: "operation",
    resizable: false,
    align: "right"
  }
];

onMounted(() => {
  initSort();
});

function initSort() {
  const el = document.querySelector(".el-table__body-wrapper tbody");
  new Sortable(el, {
    animation: 180,
    delay: 0,
    dragClass: "sortable-drag",
    onEnd: evt => {
      const currRow = props.attributes.attributes.splice(evt.oldIndex, 1)[0];
      props.attributes.attributes.splice(evt.newIndex, 0, currRow);
    }
  });
}

function handleBtnClick(operation: string, row: Attribute) {
  if (operation === "hide") {
    row.hidden = !row.hidden;
  }
  // switch (operation) {
  //   case 'hide':
  //     row.hidden = !row.hidden;
  //     break;
  // }
}
</script>

<style lang="scss">
@import "@/assets/css/theme.scss";
.v-custom-attr-display {
  .v-custom-attr-diaplay-header {
    border: 1px solid #ddd;
    padding: 6px;
    background: $toolbar-bg-color;
  }

  .v-custom-attr-display-table {
    border-right: 1px solid #ddd;
    border-left: 1px solid #ddd;
  }
  height: 100%;
  overflow: hidden;
  display: flex;
  ._table-body {
    flex: 1;
    overflow: auto;
  }
  .el-table__body {
    .el-table__row {
      cursor: grab !important;
    }
  }
}
</style>
